import { Component, OnInit } from '@angular/core';
import * as jsPDF from "jspdf";
import html2canvas from 'html2canvas';
import { Resume } from '../../model/Resume';
import { ResumeService } from '../../service/resumeService';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'app-resume',
  templateUrl: './resume.component.html',
  styleUrls: ['./resume.component.css']
})
export class ResumeComponent implements OnInit {

  /*abbreviation:
   *isMouseEnter  =>  ime
   *isMouseLeave  =>  iml
   *isMouseHover  =>  imh
   *callback      =>  cb
  */

  //
  readonly = false;
  box1_imh = false;
  box2_imh = false;
  box3_imh = false;
  box4_imh = false;
  box5_imh = false;
  box6_imh = false;
  selectedbox:number = 0;
  //resume
  name:string = "";
  sex :string = "";
  grade :string = "";
  academy: string = "";
  qq: string = "";
  weixin: string = "";
  phone: string = "";
  email:string = "";
  choices:any[];
  choice:string = "";
  experience:string = "";
  expert:string="";
  why:string ="";
  suggestion:string = "";

  constructor(public resumeService:ResumeService,
              public datePipe:DatePipe) { }

  ngOnInit(): void {
    this.choices = [
      {label: '机构组', value: '机构组'},
      {label: '控制组_PC端', value: '控制组_PC端'},
      {label: '控制组_单片机端', value: '控制组_单片机端'},
      {label: '硬件组', value: '硬件组'},
      {label: '宣传组', value: '宣传组'}
  ];
  }
  //mouse click callback
  click(e){
    if(this.readonly){
      return;
    }
    if(!this.findKeywordByLocalName("article",e)){
      this.selectedbox = 0;
    }
    else if(this.findKeywordByClassName(["box1","box1 ng-star-inserted"],e)){
      this.selectedbox = 1;
    }
    else if(this.findKeywordByClassName(["box3","box3 ng-star-inserted"],e)){
      this.selectedbox = 3;
    }
    else if(this.findKeywordByClassName(["box4","box4 ng-star-inserted"],e)){
      this.selectedbox = 4;
    }
    else if(this.findKeywordByClassName(["box5","box5 ng-star-inserted"],e)){
      this.selectedbox = 5;
    }
    else if(this.findKeywordByClassName(["box6","box6 ng-star-inserted"],e)){
      this.selectedbox = 6;
    }

  }

  //helper function
  findKeywordByClassName(keywords,event){
    let path = event.path;
    for(let i=0; i < path.length; i++){
      if(path[i].localName == "app-resume"){
        return false;
      }
      else{
        for(let j = 0;j<keywords.length;j++){
          if(path[i].className == keywords[j]){
            return true;
          }
        }
      }
    }
    return false;
  }
  findKeywordByLocalName(keyword,event){
    let path = event.path;
    for(let i=0; i < path.length; i++){
      if(path[i].localName == "app-resume"){
        return false;
      }
      else{
        if(path[i].localName == keyword){
          return true;
        }
      }
    }
    return false;
  }




  box1_enter(){
    this.box1_imh = true;
  }
  box1_leave(){
    this.box1_imh = false;
  }

  box3_enter(){
    this.box3_imh = true;
  }
  box3_leave(){
    this.box3_imh = false;
  }

  box4_enter(){
    this.box4_imh = true;
  }
  box4_leave(){
    this.box4_imh = false;
  }

  box5_enter(){
    this.box5_imh = true;
  }
  box5_leave(){
    this.box5_imh = false;
  }

  box6_enter(){
    this.box6_imh = true;
  }
  box6_leave(){
    this.box6_imh = false;
  }


  generatePDF(){
    //html2canvas(document.querySelector("article"),{scrollX:0, scrollY: -window.scrollY}).then(canvas =>{
    // var pdf = new jsPDF('p','pt',[canvas.width,canvas.height]);
    //  var imgData = canvas.toDataURL("image/jpeg",1.0);
    //  pdf.addImage(imgData,0,0,);
    //  pdf.save("北航机器人队报名表.pdf");
    //})
    this.makePdf();
  }

  submit(){
    if(this.name == "" || this.name == null){
      alert("请填写姓名");
      return;
    }
    if(this.sex == "" || this.name == null){
      alert("请填写性别");
      return;
    }
    if(this.phone == "" || this.phone == null){
      alert("请填写手机号");
      return;
    }
    if(this.email == "" || this.email == null){
      alert("请填写邮箱");
      return;
    }

    let resume = new Resume();
    resume.name = this.name;
    resume.sex = this.sex;
    resume.grade = this.grade;
    resume.academy = this.academy;
    resume.phone = this.phone;
    resume.email = this.email;
    resume.choice = this.choice;
    resume.experience = this.experience;
    resume.expert = this.expert;
    resume.why = this.why;
    resume.suggestion = this.suggestion;
    resume.date = this.datePipe.transform(new Date(),'yyyy-MM-dd hh:mm:ss');
    this.resumeService.submit(resume).subscribe(response=>{
    console.log(response);
    alert("提交成功");
    },
    error=>{
      alert("提交失败");
    })
  }




  //split in A4 size
  makePdf() {
    var target = document.querySelector("article");

    html2canvas(target,{scrollX:0, scrollY: -window.scrollY}).then(canvas=>{
      var contentWidth = canvas.width;
      var contentHeight = canvas.height;

      //一页pdf显示html页面生成的canvas高度;
      var pageHeight = contentWidth / 592.28 * 841.89;
      //未生成pdf的html页面高度
      var leftHeight = contentHeight;
      //页面偏移
      var position = 0;
      //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
      var imgWidth = 595.28;
      var imgHeight = 592.28/contentWidth * contentHeight;

      var pageData = canvas.toDataURL('image/jpeg', 1.0);

      var pdf = new jsPDF('', 'pt', 'a4');

      //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
      //当内容未超过pdf一页显示的范围，无需分页
      if (leftHeight < pageHeight) {
      pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );
      } else {
          while(leftHeight > 0) {
              pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
              leftHeight -= pageHeight;
              position -= 841.89;
              //避免添加空白页
              if(leftHeight > 0) {
                pdf.addPage();
              }
          }
      }

      if((this.name == null || this.name == "") || (this.choice == null || this.choice == "")){
        pdf.save("北航机器人队报名表.pdf");
      }
      else{
        pdf.save(this.choice + "_" + this.name + ".pdf");
      }

  })
  }
}
